<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{ data, loading, error, hasMore }" collection="goodList">
			<view v-if="error">加载错误</view>
			<view v-if="loading">数据拼命加载中...</view>
			<view class="list-item" v-for="item in data" :key="item._id">
				<image :src="item.image" mode=""></image>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
					<view class="price">{{item.price}}</view>
				</view>
			</view>
			<uni-load-more v-if="hasMore" status="more"></uni-load-more>
			<uni-load-more v-else status="noMore"></uni-load-more>
		</unicloud-db>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
const udb = ref();

onReachBottom(() => {
	udb.value.loadMore()
})
onPullDownRefresh(() => {
	udb.value.loadData({ clear: true }, () => {
		uni.stopPullDownRefresh()
	})
})

</script>

<style lang="scss">
.list-item {
	display: flex;
	image {
		width: 200px;
		height: 200px;
		flex-shrink: 0;
	}
}
</style>
